<template>
	<view class="regin_view">
		<view class="data_form">
			<view class="title">注册</view>
			<view class="regin_form">
				<form @submit="send" v-show="temp==1">
					<view class="form_inputs" :style="{border:idClass}">
						<view class="input_left">
							<icon class="iconfont">&#xe641;</icon>
						</view>
						<view class="input_right">
							<input type="text" name="userID" @blur="checkID" />
						</view>
					</view>
					<view class="form_inputs" :style="{border:nameClass}">
						<view class="input_left">
							<icon class="iconfont">&#xe619;</icon>
						</view>
						<view class="input_right">
							<input type="text" name="userName" @blur="checkName" />
						</view>
					</view>
					<view class="form_inputs" :style="{border:keyClass}">
						<view class="input_left">
							<icon class="iconfont">&#xe60c;</icon>
						</view>
						<view class="input_right">
							<input type="password" name="userKey" @blur="checkKey" />
						</view>
					</view>
					<view class="form_inputs" :style="{border:reKeyClass}">
						<view class="input_left">
							<icon class="iconfont">&#xe60c;</icon>
						</view>
						<view class="input_right">
							<input type="password" @blur="checkReKey" />
						</view>
					</view>
					<view class="form_inputs">
						<text class="input_text">发送验证码</text>
						<button form-type="submit">发送验证码</button>
					</view>
				</form>
				<form @submit="regin" v-show="temp==2">
					<view class="form_inputs" style="margin-top: 150upx;" :style="{border:codeClass}">
						<view class="input_left">
							<text class="font">验证码</text>
						</view>
						<view class="input_right">
							<input type="text" name="codeNum" @blur="checkCode" />
						</view>
					</view>
					<view class="form_inputs" style="margin-top: 400upx;">
						<text class="input_text">完成注册</text>
						<button form-type="submit">完成注册</button>
					</view>
				</form>
				<view class="gotoLogin" @click="goLogin">
					已有账号,去登陆
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				temp: 1,
				id_right: false,
				key_right: false,
				name_right: false,
				reKey_right: false,
				idClass: 'white solid 1px',
				keyClass: 'white solid 1px',
				nameClass: 'white solid 1px',
				reKeyClass: 'white solid 1px',
				key_val: '',
				userData: {},
				code_right: false,
				codeClass: 'white solid 1px',
				token: ''
			}
		},
		onLoad() {

		},
		methods: {
			goLogin: function() {
				uni.redirectTo({
					url: 'login'
				})
			},
			checkID: function(event) {
				let id = event.detail.value;
				let patt = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (patt.test(id)) {
					console.log("ID格式正确");
					this.id_right = true;
					this.idClass = 'white solid 1px';
				} else {
					console.log("id格式不正确");
					this.id_right = false;
					this.idClass = '#FF7256 solid 1px';
				}
			},
			checkName: function(event) {
				let name = event.detail.value;
				if (name.length <= 2 || name == null || name == undefined || name == "  " || name.length > 10) {
					console.log("name格式不正确");
					this.name_right = false;
					this.nameClass = '#FF7256 solid 1px';
				} else {
					console.log("name格式正确");
					this.name_right = true;
					this.nameClass = 'white solid 1px';
				}
			},
			checkKey: function(event) {
				let key = event.detail.value;
				this.key_val = key;
				let patt = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/;
				if (patt.test(key)) {
					console.log("key格式正确");
					this.key_right = true;
					this.keyClass = 'white solid 1px';
				} else {
					console.log("key格式不正确");
					this.key_right = false;
					this.keyClass = '#FF7256 solid 1px';
				}
			},
			checkReKey: function(event) {
				let key = event.detail.value;
				console.log(this.key_val);
				let patt = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/;
				if (patt.test(key) && key == this.key_val) {
					console.log("key格式正确");
					this.reKey_right = true;
					this.reKeyClass = 'white solid 1px';
				} else {
					console.log("key格式不正确");
					this.reKeyClass = false;
					this.reKeyClass = '#FF7256 solid 1px';
				}
			},
			send: function(event) {
				let formData = event.detail.value;
				if (!this.id_right || !this.name_right || !this.key_right || !this.reKey_right) {
					console.log("不通过")
					console.log(JSON.stringify(this.$data))
					return false;
				}
				this.userData = formData;
				uni.request({
					url: 'http://192.168.5.223:9000/getMailCode',
					method: 'POST',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						"mail": formData.userID
					},
					dataType: 'json',
					success: (res) => {
						if (res.statusCode == 200) {
							if (res.data.state == 200) {
								uni.showToast({
									title: res.data.msg,
									duration: 1000
								})
								this.token = res.data.data;
								this.temp = 2;
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 1000,
									icon: 'none'
								})
							}
						}
					},
					fail: () => {
						console.log("请求失败");
					}
				})
			},
			regin: function(e) {
				console.log("点击注册按钮")
				let codeNum = e.detail.value.codeNum;
				console.log(codeNum)
				uni.request({
					url: 'http://192.168.5.223:9000/user',
					method: 'POST',
					header: {
						'Content-type': 'application/x-www-form-urlencoded',
						'token': this.token
					},
					data: {
						"userID": this.userData.userID,
						"userKey": this.userData.userKey,
						"userName": this.userData.userName,
						"codeNum": codeNum
					},
					dataType: 'json',
					success: (res) => {
						if (res.statusCode == 200) {
							switch (res.data.state) {
									case 200:
										uni.showToast({
											title: res.data.msg,
											duration: 1000
										})
										break;
									case 400:
									uni.showToast({
										title: res.data.msg,
										duration: 1000,
										icon: 'none'
									})
									break;
									case 500:
									uni.showToast({
										title: res.data.msg,
										duration: 1000,
										icon: 'none'
									})
									break;
							}
						}
					},
					fail: () => {
						console.log("请求失败");
					}
				})
			},
			checkCode: function(e) {
				let code = e.detail.value;
				let patt = /d{6}/;
				if (patt.test(code)) {
					this.code_right = true;
					this.codeClass = 'white solid 1px';
				} else {
					this.code_right = false;
					this.codeClass = '#FF7256 solid 1px';
				}
			}
		}
	}
</script>

<style>
	@import url("regin.css");
</style>
